<script setup name="login">
import login_img from '@/assets/image/login.png'
import {reactive} from 'vue'
import axios from 'axios'
import {useAuthStore} from '@/stores/auth'
import {useRouter} from 'vue-router'
import authHttp from '@/api/authHttp'

import { ElMessage } from 'element-plus'

const authStore = useAuthStore()
const router = useRouter()

let form = reactive({
    email: '',
    password: '',
})

const onSubmit = async () => {

    let pwdRgx = /^[0-9a-zA-Z_-]{6,20}/
    let emailRgx = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9])+/

    if(!emailRgx.test(form.email)){
        ElMessage('邮箱格式不满足！.')
        return
    }

    if(!pwdRgx.test(form.password)){
        ElMessage.error('密码格式不满足！.')
        return
    }

    // // 第一版：直接Axios
    // // 配置：设置超时时间
    // // ur：完整的URL
    // axios.post("http://127.0.0.1:8000/auth/login", {
    //     email: form.email,
    //     password: form.password
    // }).then((res) => {
    //     //then：代表是成功的情况(在这里，代表返回的状态码是200)
    //     let data = res.data;
    //     let token = data.token;
    //     let user = data.user;

    //     authStore.setUserToken(user, token)

    //     //跳转到OA系统的首页
    //     router.push({name:"frame"})

    // }).catch((err) => {
    //     // catc：代表失败的情况(代表返回的是非200状态码)
    //     console.log(err);
    //     alert(err.detail) 
    // });

    // 第二个版本：对Axios进行一层封装(封装好路径，仅需要传参数)
    // authHttp.login(form.email, form.password).then((res) => {
    //     //then：代表是成功的情况(在这里，代表返回的状态码是200)
    //     let data = res.data;
    //     let token = data.token;
    //     let user = data.user;

    //     authStore.setUserToken(user, token)

    //     // 跳转到OA系统的首页
    //     router.push({name:"frame"})

    // }).catch((err) => {
    //     // catc：代表失败的情况(代表返回的是非200状态码)
    //     console.log(err);
    //     alert(err) 
    // });
    


    // 第三个版本：改成异步调用的版本
    try{

        let data = await authHttp.login(form.email, form.password)
        
        let token = data.token;
        let user = data.user;
        
        authStore.setUserToken(user, token)

        //跳转到OA系统的首页
        router.push({name:"home"})
     
    }catch(detail){  
        alert(detail)
    }
}


</script>

<template>
    <div class="dowebok">
        <div class="container-login100">
            <div class="wrap-login100">
                <div class="login100-pic js-tilt" data-tilt>
                    <img :src="login_img" alt="IMG" />
                </div>

                <div class="login100-form validate-form">
                    <span class="login100-form-title"> 员工登陆 </span>

                    <div class="wrap-input100 validate-input">
                        <input class="input100" type="text" name="email" placeholder="邮箱" v-model="form.email"/>
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="iconfont icon-fa-envelope" aria-hidden="true"></i>
                        </span>
                    </div>

                    <div class="wrap-input100 validate-input">
                        <input class="input100" type="password" name="password" placeholder="密码" v-model='form.password'/>
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="iconfont icon-fa-lock" aria-hidden="true"></i>
                        </span>
                    </div>

                    <div class="container-login100-form-btn">
                        <button class="login100-form-btn" @click="onSubmit">
                            登陆
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped src="@/assets/css/login.css"></style>
<style scoped src="@/assets/iconfont/iconfont.css"></style>